<template>
  <div class="container-subjects">
    <el-card>
      <!-- 筛选 -->
      <el-row>
        <!-- 表单 -->
        <el-col :span="18">
          <el-form label-width="80px" inline size="small">
            <el-form-item label="学科名称">
              <el-input
                v-model="reqParams.subjectName"
                placeholder="搜索关键字"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="onClear">清除</el-button>
              <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <!-- 按钮 -->
        <el-col :span="6" style="text-align: right">
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
          >添加学科</el-button>
        </el-col>
      </el-row>
      <!-- 总计 -->
      <el-alert
        :title="`数据一共 ${total} 条`"
        type="info"
        show-icon
        style="margin-bottom: 15px"
      ></el-alert>
      <!-- 表格 -->
      <el-table :data="subjects">
        <el-table-column label="序号" type="index" />
        <el-table-column label="学科名称" prop="subjectName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column label="创建日期" width="150px">
          <template
            slot-scope="scope"
          >{{scope.row.addDate | parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="前台是否显示">
          <template
            slot-scope="scope"
          >{{scope.row.isFrontDisplay ? '是' : '否'}}</template>
        </el-table-column>
        <el-table-column
          label="二级目录"
          prop="twoLevelDirectory"
        />
        <el-table-column label="标签" prop="tags" />
        <el-table-column label="题目数量" prop="totals" />
        <el-table-column label="操作" width="240px">
          <template slot-scope="scope">
            <el-link
              type="primary"
              :underline="false"
              @click="onGoDirectorys(scope.row)"
            >学科分类</el-link>
            <el-link
              type="primary"
              :underline="false"
              @click="onGoTag(scope.row)"
            >学科标签</el-link>
            <el-link type="primary" :underline="false">修改</el-link>
            <el-link
              type="primary"
              :underline="false"
              @click="onDelSubject(scope.row.id)"
            >删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pager"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="reqParams.pagesize"
        :page-sizes="[5, 10, 20, 50]"
        :current-page="reqParams.page"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
// 学科列表api
import { list as getSubjectsList, remove as delSubject } from "@/api/hmmm/subjects.js";
export default {
  name: "subjects-page",
  components: {},
  props: {},
  data() {
    return {
      reqParams: {
        subjectName: null, // 学科名
        page: 1, // 页码
        pagesize: 10, // 每页20条数据
      },
      subjects: [], // 学科列表数据
      total: 0, // 总条数
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getSubjects();
  },
  mounted() {},
  methods: {
    onGoDirectorys(row) {
      const { id, subjectName: name } = row;
      this.$router.push({
        path: "directorys",
        query: {
          id,
          name,
        },
      });
    },
    onGoTag(row) {
      const { id, subjectName: name } = row;
      this.$router.push({
        path: "tags",
        query: {
          id,
          name,
        },
      });
    },
    onDelSubject(id) {
      this.$confirm("此操作将永久删除该学科, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delSubject({id})
          this.$message.success('删除成功！')
          this.getSubjects()
        })
        .catch(() => {
        });
    },
    async getSubjects() {
      const res = await getSubjectsList(this.reqParams);
      console.log(res);
      this.total = res.data.counts;
      this.subjects = res.data.items;
    },
    onCurrentChange(page) {
      // console.log(page);
      this.reqParams.page = page;
      this.getSubjects();
    },
    onSizeChange(curPageSize) {
      console.log(123);
      this.reqParams.pagesize = curPageSize;
      this.reqParams.page = 1;
      this.getSubjects();
    },
    onSearch() {
      this.reqParams.page = 1;
      this.getSubjects();
    },
    onClear() {
      this.reqParams.subjectName = null;
    },
  },
};
</script>

<style scoped lang="scss">
.container-subjects {
  padding: 10px 15px;
  .pager {
    margin-top: 15px;
    text-align: right;
  }
  .el-link {
    margin-right: 10px;
  }
}
</style>

